<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全屏接口的使用</title>
	</head>

	<body>

		<div class="">
			<img src="https://ws1.sinaimg.cn/large/c808130agy1fmtx998i6mj20i20cggmf.jpg" />
			<br />
			<input type="button" id="full" value="全屏" />
			<input type="button" id="cancelFull" value="退出全屏" />
			<input type="button" id="isFull" value="是否全屏" />

		</div>

		<script type="text/javascript">
			/** 全屏操作的主要方法和属性
			 * 
			 * 1. requestFullscreen: 开启全屏
			 * 2. cancelFullScreen: 退出全屏(退出全屏,只能使用document来实现)
			 * 3. fullscreenElement: 是否全屏
			 * */
			window.onload = function() {

				var div = document.querySelector("div")

				document.querySelector("#full").onclick = function() {
					// 使用能力测试

					if(div.requestFullscreen) {
						div.requestFullscreen();
					} else if(div.webkitRequestFullScreen) {
						div.webkitRequestFullScreen(); //谷歌
					} else if(div.mozRequestFullScreen) {
						div.mozRequestFullScreen(); //火狐
					} else if(div.msRequestFullscreen) {
						div.msRequestFullscreen(); //ie
					} else {
						div.requestFullscreen();
					}

				}

				document.querySelector("#cancelFull").onclick = function() {

					if(document.cancelFullScreen) {
						document.cancelFullScreen();
					} else if(document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen(); //谷歌
					} else if(document.mozCancelFullScreen) {
						document.mozCancelFullScreen(); //火狐
					} else if(document.msCancelFullScreen) {
						document.msCancelFullScreen(); //ie
					} else {
						document.cancelFullScreen();
					}
				}

				document.querySelector("#isFull").onclick = function() {
					if(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.msFullscreenElement) {
						alert("是全屏")
					} else {
						alert("不是全屏")
					}
				}
			}
		</script>

	</body>

</html>